<template>
    <div class="home">
        <!--头部   -->
        <Header></Header>
        <home-swiper></home-swiper>
        <Home-icons></Home-icons>
        <home-recommend></home-recommend>
        <home-weekend></home-weekend>
    </div>
</template>

<script>
  import axios from 'axios'
  import Header from '../components/Header'
  import HomeSwiper from '../components/Swiper'
  import HomeIcons from '../components/Icons'
  import HomeRecommend from '../components/Recommend'
  import HomeWeekend from '../components/Weekend'
  import { mapState } from 'vuex' // 引入快捷获取state
  
  export default {
    name: 'home',
    data () {
      return {
        currentCity: '',
      }
    },
    // 注册组件
    components: {
      Header,
      HomeSwiper,
      HomeIcons,
      HomeRecommend,
      HomeWeekend,
    },
    methods: {
      getRequest () {
        // 将当前城市变量保存到 data中
        this.currentCity = this.city
        // ajax请求城市列表
        axios.get(`/mock/api.json?city=${this.city}`).then(res => {
          console.log(res)
        })
      },
    },
    computed: {
      // vuex中的{mapstate} 辅助函数可以方便获取store中的多个state 并保存到vue实例的data中
      ...mapState(['city']),
    }
    ,
    mounted () {
      this.getRequest()
      
    },
    // keep-alive组件被激活的时候调用
    activated () {
      // 将当前选择的城市和 vue组件data中的城市进行比较 如果不同那么发送ajax请求城市列表
      if (this.city !== this.currentCity) {
        // this.getRequest()
      }
    },
  }
</script>
